<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
  </head>

  <body>
    <canvas id="myCanvas" width="600" height="300">
      <p>您的浏览器不支持 canvas!</p>
    </canvas>

    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="/node_modules/jcanvas/dist/jcanvas.js"></script>
    <script>
      var $myCanvas = $('#myCanvas')

      $myCanvas
        .drawArc({
          // draw the face
          fillStyle: 'yellow',
          strokeStyle: '#333',
          strokeWidth: 4,
          x: 300,
          y: 100,
          radius: 80,
        })
        .drawArc({
          // draw the left eye
          fillStyle: '#333',
          strokeStyle: '#333',
          x: 250,
          y: 70,
          radius: 5,
        })
        .drawArc({
          // draw the right eye
          fillStyle: '#333',
          strokeStyle: '#333',
          x: 350,
          y: 70,
          radius: 5,
        })
        .drawArc({
          // draw the nose
          strokeStyle: '#333',
          strokeWidth: 4,
          ccw: true,
          x: 300,
          y: 100,
          radius: 30,
          start: 0,
          end: 200,
        })
        .drawArc({
          // draw the smile
          strokeStyle: '#333',
          strokeWidth: 4,
          x: 300,
          y: 135,
          radius: 30,
          start: 90,
          end: 280,
        })
    </script>
  </body>
</html>
